<template>
  
  <div class="create-survey">
     <!-- 面包屑导航 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>新建问卷</el-breadcrumb-item>
    </el-breadcrumb>
    <h2>创建问卷</h2>
    <el-form :model="form" label-width="120px" ref="form">
      <el-form-item label="问卷标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="问卷题目">
        <div>
              <span>有效性检验建议：</span>
              </div>
              <div>“举头望明月”的下一句是？</div>
              <div>A.低头恩故乡</div>
              <div>B.低头思故乡</div>
              <div>C.抵头思故乡</div>
        <template v-for="(question, index) in form.questions">
          <el-card class="question-card" :key="index">
            <header>
              
              <span>第 {{ index + 1 }} 题</span>
              <el-button type="danger" size="mini" @click="removeQuestion(index)">删除</el-button>
            </header>
            <el-form-item label="题型">
              <el-radio-group v-model="question.type">
                <el-radio :label="'SingleChoice'">单选题</el-radio>
                <!-- <el-radio :label="'multiple-choice'">多选题</el-radio> -->
                <el-radio :label="'OpenEnded'">问答题</el-radio>
                <el-radio :label="'ValidCheck'">有效性检验</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="内容">
              <el-input v-model="question.content"></el-input>
            </el-form-item>
            <template v-if="question.type === 'SingleChoice' || question.type === 'ValidCheck'">
              <el-form-item label="选项">
                <template v-for="(option, optionIndex) in question.options">
                  <el-input v-model="option.value" :placeholder="'选项 ' + (optionIndex + 1)"
                    class="option-input"></el-input>
                  <el-button type="danger" size="mini" @click="removeOption(question, optionIndex)">删除</el-button>
                </template>
                <el-button size="small" @click="addOption(question)">添加选项</el-button>
              </el-form-item>
            </template>
          </el-card>
        </template>
        <el-button class="add-question-btn" type="primary" size="small" @click="addQuestion">添加问题</el-button>
      </el-form-item>
      <el-form-item label="Ecoin">
        <el-input v-model="form.ecoin" style="width: 50% ;"></el-input>
      </el-form-item>
    </el-form>
    <div class="buttons">
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
      
      <!-- <el-button @click="resetForm('form')">重置</el-button> -->
    </div>
  </div>
</template>

<script>
import Axios from 'axios';

export default {
  name: 'CreateSurvey',
  data() {
    return {
      form: {
        title: '',
        questions: [],
        ecoin: ''
      }
    };
  },
  methods: {
    addQuestion() {
      this.form.questions.push({
        type: 'SingleChoice',
        content: '',
        options: [{ value: '' }]
      });
    },
    removeQuestion(index) {
      this.form.questions.splice(index, 1);
    },
    addOption(question) {
      question.options.push({ value: '' });
    },
    removeOption(question, index) {
      question.options.splice(index, 1);
    },
    async submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.form.userId = localStorage.getItem('userId')
          console.log(this.form);
          const token = localStorage.getItem("token")
          let res1 = await Axios.post(this.$baseURL+ '/Survey/NewSurvey', this.form, {
            headers: {
              'Content-Type': 'application/json',
               Authorization: `Bearer ${token}`
            },
          })
          
          this.$router.push('/Surveywrite/index')
          this.$message({
            type: 'success',
            message: '提交成功'
          })


          console.log(res1)
        } else {
          console.log('表单无效');
          return false;
        }
      });


      
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style>
.create-survey {
  width: 50%;
}
</style>
